<!--
* @author wn
* @date 2022/09/23 14:19:01
* @description: render 封装 步长 组件 xtx-step-item 为 插槽内容
!-->
<script>
export default {
	name: 'XtxStep',
	props: {
		active: {
			type: Number,
			default: 1,
		},
	},
	setup(props, { slots }) {
		// 还是根据 插槽 动态 生成 组件
		const render = () => {
			const dynamicStepItems = []
			slots.default().forEach(item => {
				if (item.type.name === 'XtxStepItem') {
					dynamicStepItems.push(item)
				} else {
					// v-for 渲染 + 去掉 注释 当作 插槽  1 没有名字 2 不是数组
					item.children instanceof Array &&
						item.children.forEach(item => dynamicStepItems.push(item))
				}
			})

			// 生成 xtx-step-item s
			const items = dynamicStepItems.map((item, i) => (
				<div class={{ 'xtx-step-item': true, active: i < props.active }}>
					<div>
						<span>{i + 1}</span>
						<p>{item.props.title}</p>
						<p>{item.props.time}</p>
					</div>
				</div>
			))
			return <div class="xtx-step">{items}</div>
		}

		return render
	},
}
</script>
<style scoped lang="less">
.xtx-step {
	display: flex;
	align-items: center;
	text-align: center;
	&-item {
		flex: 1;
		div {
			position: relative;
			// height: 48px;
			> span {
				// position: absolute;
				// top: 0;
				// left: 50%;
				// transform: translateX(-50%);
				display: inline-block;
				position: relative;
				width: 48px;
				height: 48px;
				font-size: 28px;
				line-height: 44px;
				color: #ccc;
				border: 2px solid #e4e4e4;
				border-radius: 50%;
				background-color: #fff;
				z-index: 1;
			}
			// 前后 伪元素  画 步长 线  步长线 以外层 div为准
			&::before,
			&::after {
				position: absolute;
				top: 23px;
				content: '';
				width: 50%;
				height: 2px;
				background-color: #e4e4e4;
			}
			&::before {
				left: 0;
			}
			&::after {
				right: 0;
			}
		}
		p {
			color: #999;
			margin-top: 12px;
			height: 19px;
			&:last-of-type {
				font-size: 12px;
				margin-top: 6px;
				height: 16px;
			}
		}
		// 第一个  最后 一个  无需 对应 前后 伪元素
		&:first-child {
			div {
				&::before {
					display: none;
				}
			}
		}
		&:last-child {
			div {
				&::after {
					display: none;
				}
			}
		}
		// 激活状态
		&.active {
			div {
				span,
				&::before,
				&::after {
					color: #fff;
					border-color: @xtxColor;
					background-color: @xtxColor;
				}
			}
			p:first-of-type {
				color: @xtxColor;
			}
		}
	}
}
</style>
